<template>
  <ul>
    <li>
      <router-link to="/">
        首 页
      </router-link>
    </li>
    <li>
      <router-link to="/cart">
        购物车
      </router-link>
    </li>
    <li>
      <router-link to="/user">
        我的
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
name: "tabar"
}
</script>

<style scoped>
li{
  list-style: none;
}
ul{
  display: flex;
  width: 100vw;
  justify-content: space-around;
  position: fixed;
  left: 0;
  bottom: 0;
}
ul li{
  padding: 10px 14px;
  border-radius: 4px;
  background-color: #e3e4e5;
}
a{
  text-decoration: none;
  color: #999;
  display: block;
  width: 100%;
  height: 100%;
}
a.router-link-exact-active{
  background-color: #ff4444;
  color: white;
}
</style>
